import React, { useEffect, useState } from "react";
import "../../../App.scss";
import axios from "../../../axios";

import Buttons from "../../../componet/Button/button";
import Input from "../../../componet/Input/InputComponent";
import { Dropdown } from "../../../componet/index";

import { Button, Modal, message, Upload } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import type { UploadProps } from "antd";

// import Zj from "./Zj";

//上传
const props: UploadProps = {
  name: "file",
  action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
  headers: {
    authorization: "authorization-text",
  },
  onChange(info) {
    if (info.file.status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === "done") {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

//组织类型下拉
const options = [
  {
    value: "党委",
    label: "党委",
  },
  {
    value: "党总支",
    label: "党总支",
  },
  {
    value: "党支部",
    label: "党支部",
  },
  {
    value: "党小组",
    label: "党小组",
  },
  {
    value: "工会",
    label: "工会",
  },
  {
    value: "团委",
    label: "团委",
  },
  {
    value: "其他",
    label: "其他",
  },
];

export default function PartyOrganizationManagement() {
  const [name, setName] = useState("");
  const [list, setList] = useState<any>([]);
  const [modal1Open, setModal1Open] = useState(false);
  const [zjname, setZjname] = useState("");
  const [zjlx, setZjlx] = useState("");
  const [modal1Opens, setModal1Opens] = useState(false);
  const [upname, setUpname] = useState("");
  const [uplx, setUplx] = useState("");
  const [upid, setUpid] = useState("");

  //组织渲染
  const getlist = async () => {
    let res: any = await axios.get("http://localhost:3000/zjgl", {
      params: {
        name: name,
      },
    });
    setList(res.list);
  };

  //新增组织
  const add = async () => {
    let obj = {
      name: zjname,
      type: zjlx,
    };
    if (zjname && zjlx) {
      let res: any = await axios.post("http://localhost:3000/zjgladd", obj);
      if (res.code === 200) {
        message.success("添加成功");
        setZjname("");
        setZjlx("");
        getlist();
        setModal1Open(false);
      } else {
        message.error("添加失败");
      }
    } else {
      message.error("请填写完整信息");
    }
  };
  //删除
  const del = async (id: any) => {
    let res: any = await axios.delete("http://localhost:3000/zjgldel?id=" + id);
    if (res.code === 210) {
      message.success("删除成功");
      getlist();
    } else {
      message.error("删除失败");
    }
  };
  //修改渲染
  const upshow = (item: any) => {
    setModal1Opens(true);
    setUpname(item.name);
    setUplx(item.type);
    setUpid(item._id);
  };
  //修改
  const update = async () => {
    let objs = {
      id: upid,
      name: upname,
      type: uplx,
    };
    if (upname && uplx) {
      let res: any = await axios.put("http://localhost:3000/zjglupdate", objs);
      if (res.code === 220) {
        message.success("修改成功");
        setUplx("");
        setUpname("");
        getlist();
        setModal1Opens(false);
      } else {
        message.error("修改失败");
      }
    } else {
      message.error("请填写完整信息");
    }
  };
  useEffect(() => {
    getlist();
  }, []);

  return (
    <div className="mxk-tzjgl">
      <div className="mxk-tzjgl-top">
        <Buttons
          text={"新增组织"}
          setColor="white"
          onClick={() => setModal1Open(true)}
        ></Buttons>
        <Modal
          title="新增党组织"
          wrapStyle={{ backgroundColor: "rgb(211, 211, 211)" }}
          style={{ top: 150 }}
          open={modal1Open}
          footer={() => (
            <div
              style={{
                marginTop: 20,
                display: "flex",
                justifyContent: "flex-end",
                columnGap: 20,
              }}
            >
              <Buttons
                text="取消"
                setColor="black"
                setBackgroundColor="white"
                onClick={() => {
                  setModal1Open(false);
                }}
              ></Buttons>
              <Buttons
                text="确定"
                setColor="white"
                onClick={() => {
                  add();
                }}
              ></Buttons>
            </div>
          )}
        >
          <div className="mxk-tzjgl-addmodal">
            <div className="mxk-tzjgl-addmodal-in">
              <span style={{ color: "red" }}>*</span> 组织名称:{" "}
              <Input
                value={zjname}
                onChange={(e) => {
                  setZjname(e);
                }}
              ></Input>
            </div>
            <div className="mxk-tzjgl-addmodal-lx">
              <span style={{ color: "red" }}>*</span> 组织类型:{" "}
              <Dropdown
                options={options}
                value={zjlx}
                onChange={(e) => {
                  setZjlx(e);
                }}
              />
            </div>
            <div className="mxk-tzjgl-addmodal-lx">
              上级组织:
              <Dropdown options={[]} />
            </div>
            <div className="mxk-tzjgl-addmodal-lx">
              组织职责:
              <Dropdown options={[]} />
            </div>
            <div className="mxk-tzjgl-addmodal-lx">
              组织架构图:{" "}
              <Upload {...props}>
                <Button
                  icon={<PlusOutlined />}
                  className="mxk-tzjgl-addmodal-btn"
                ></Button>
              </Upload>
            </div>
          </div>
        </Modal>
        组织名称:
        <Input
          value={name}
          onChange={(e) => {
            setName(e);
          }}
        ></Input>
        <Buttons
          text={"查询"}
          setColor="white"
          setBackgroundColor="rgb(204, 53, 47)"
          onClick={() => {
            getlist();
          }}
        ></Buttons>
        <Buttons
          text={"重置"}
          setBackgroundColor="white"
          onClick={() => {
            setName("");
          }}
        ></Buttons>
      </div>
      <div>
        <table className="mxk-tzjgl-table">
          <thead>
            <tr>
              <th>组织名称</th>
              <th>组织类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {list.map((item: any, index: number) => {
              return (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.type}</td>
                  <td className="mxk-tzjgl-cz">
                    <span
                      onClick={() => {
                        upshow(item);
                      }}
                    >
                      编辑
                    </span>
                    <Modal
                      title="编辑党组织"
                      wrapStyle={{ backgroundColor: "rgb(211, 211, 211)" }}
                      style={{ top: 150 }}
                      open={modal1Opens}
                      footer={() => (
                        <div
                          style={{
                            marginTop: 20,
                            display: "flex",
                            justifyContent: "flex-end",
                            columnGap: 20,
                          }}
                        >
                          <Buttons
                            text="取消"
                            setColor="black"
                            setBackgroundColor="white"
                            onClick={() => {
                              setModal1Opens(false);
                            }}
                          ></Buttons>
                          <Buttons
                            text="确定"
                            setColor="white"
                            onClick={() => {
                              update();
                            }}
                          ></Buttons>
                        </div>
                      )}
                    >
                      <div className="mxk-tzjgl-addmodal">
                        <div className="mxk-tzjgl-addmodal-in">
                          <span style={{ color: "red" }}>*</span> 组织名称:{" "}
                          <Input
                            value={upname}
                            onChange={(e) => {
                              setUpname(e);
                            }}
                          ></Input>
                        </div>
                        <div className="mxk-tzjgl-addmodal-lx">
                          <span style={{ color: "red" }}>*</span> 组织类型:{" "}
                          <Dropdown
                            options={options}
                            value={uplx}
                            onChange={(e) => {
                              setUplx(e);
                            }}
                          />
                        </div>
                        <div className="mxk-tzjgl-addmodal-lx">
                          上级组织:
                          <Dropdown options={[]} />
                        </div>
                        <div className="mxk-tzjgl-addmodal-lx">
                          组织职责:
                          <Dropdown options={[]} />
                        </div>
                        <div className="mxk-tzjgl-addmodal-lx">
                          组织架构图:{" "}
                          <Upload {...props}>
                            <Button
                              icon={<PlusOutlined />}
                              className="mxk-tzjgl-addmodal-btn"
                            ></Button>
                          </Upload>
                        </div>
                      </div>
                    </Modal>
                    <span
                      onClick={() => {
                        del(item._id);
                      }}
                    >
                      删除
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
